<template>
  <view class="artworks-list-item-container">
    <view
      v-for="(item, index) in artworksListData"
      :key="item.id"
      class="artworks-item"
      @click="handleArtworks(item, index)">
      <u-image
        width="100%"
        height="370rpx"
        :lazy-load="true"
        :fade="false"
        :border-radius="0"
        :show-menu-by-longpress="false"
        :src="`${item.wx_cover_url || item.cover_url}?vframe/jpg/offset/1`"
        class="image">
        <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
      </u-image>
      <view v-if="!item.playFlage" @click="downloadPopupFlag = true" class="play-icon-container">
        <image
          src="@/static/image/play.png"
          mode="scaleToFill"
          class="play-icon"
        />
      </view>
      <!-- 状态显示 -->
      <view class="show-status-container">
        <view v-if="item.audit_status === 'review'" class="wait">
          <text>审核中</text>
          <u-icon name="clock" size="28"></u-icon>
        </view>
        <view v-else-if="item.audit_status === 'reject'" class="reject">
          <text>违规</text>
          <!-- <u-icon name="error-circle" size="28"></u-icon> -->
        </view>
      </view>
      <!-- 状态显示 -->
      <view class="tv-des">
        <view class="tv-title">{{ item.title }}</view>
        <view class="tv-update-time">
          <text style="margin-right: 10rpx;">{{ item.download_num }}次观看</text>
        </view>
      </view>
      <!-- 选择操作 -->
      <!-- <image
        v-if="isBatch && item.audit_status !== 'success'"
        src="@/static/icon/nochecked.png"
        mode="scaleToFill"
        class="checkbox"
        @click.native="handleCheckBox(item, index)"
      /> -->
      <image
        v-if="isBatch && !item.checked"
        src="@/static/icon/unchecked.png"
        mode="scaleToFill"
        class="checkbox"
      />
      <image
        v-else-if="isBatch && item.checked"
        src="@/static/icon/checked.png"
        mode="scaleToFill"
        class="checkbox"
      />
      <!-- 置顶 -->
      <view v-if="item.is_top === '1' && !isAlbum" class="is_top">
        <text>置顶</text>
      </view>
      <!-- 置顶 -->
      <view v-if="item.album_top === '1' && isAlbum" class="is_top">
        <text>置顶</text>
      </view>
    </view>
  </view>
</template>

<script>
import DownloadTip from '@/components/downloadTip/downloadTip.vue';
import { initVideoAd, payVideoAd, createOrder } from '@/utils/downloadArtworks';
import { mapGetters } from 'vuex';
export default {
  components: {
    DownloadTip
  },
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isBatch: {
      type: Boolean,
      default: false
    },
    isAlbum: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: '列表',
      downloadPopupFlag: false,
      artworksListData: [],
      artworksDetail: null,
      artworksDetailIndex: 0,
    }
  },
  computed: {
    ...mapGetters([
      'appletInfo',
    ])
  },
  created() {
    // setTimeout(() => {
    //   initVideoAd(this.createOrderFn); // 初始化广告
    // }, 1500)
  },
  watch: {
    artworksList: {
      immediate: true,
      deep: true,
      handler(val) {
        this.artworksListData = val;
      }
    },
    appletInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        initVideoAd(this.createOrderFn); // 初始化广告
      }
    }
  },
  methods: {

    // 播放视频广告
    handleDownload() {
      if (this.appletInfo.video_ad) {
        payVideoAd();
      } else {
        this.createOrderFn();
        this.downloadPopupFlag = false;
      }
    },

    // 创建订单
    createOrderFn() {
      this.downloadPopupFlag = false;
      this.$emit('onChange', this.artworksDetailIndex);
      createOrder({
        artworks_id: this.artworksDetail.id,
        artworks_type: this.artworksDetail.type,
        merchant_id: this.artworksDetail.id
      });
    },

    // 点击作品
    handleArtworks(rowDta, index) {
      if (!this.isBatch) {
        this.$emit('handleArtworks', rowDta);
        return;
      }
      this.$emit('handleCheckBox', index);
    },

    // 关闭下载弹窗
    downloadPopupClose() {
      this.downloadPopupFlag = false;
    },
  }
}
</script>

<style lang="scss">
  .artworks-list-item-container{
    display: flex;
    flex-wrap: wrap;

    .artworks-item{
      width: 100%;
      margin-bottom: 24rpx;
      padding: 24rpx;
      position: relative;
      background: rgba($color: #000000, $alpha: .6);
      border-radius: 16rpx;
      overflow: hidden;

      .tv-title{
        color: #fff;
        padding: 12rpx 0;
        font-size: 32rpx;
      }

      .tv-update-time{
        color: #fff;
        font-size: 20rpx;
      }

      .show-status-container{
        background: rgba($color: #000000, $alpha: .6);
        color: #fff;
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        z-index: 1;
        position: absolute;
        right: 24rpx;
        left: 0;
        top: 0;
        margin: auto;
        display: flex;
        padding-left: 24rpx;
        padding-right: 24rpx;
        font-size: 24rpx;
        // border-radius: 0 0 16rpx 16rpx;

        .wait{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #f29100;
        }

        .reject{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #fa3534;
          font-size: 20rpx;
        }
      }

      .play-icon{
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .5);
      }
    }
    .checkbox{
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      z-index: 9;
    }

    .is_top{
      text-align: center;
      width: 70rpx;
      height: 36rpx;
      line-height: 36rpx;
      position: absolute;
      font-size: 24rpx;
      left: 0;
      top: 0;
      color: #fff;
      border-radius: 6rpx;
      background-color: $uni-color-primary2;
    }
  }
</style>
